﻿NSMobile.views.Login = Ext.extend(Ext.Panel, {
    fullscreen: true,
    baseCls: 'loginPane',
    id: 'login',
    html: [
        '<div class="loginGraphic">',
		'</div>',
        '<section class="partyStats loginForm inputForm">',
            '<div class="inputRow">',
                '<input type="text" placeholder="Username" id="username" />',
            '</div>',
			'<div class="inputRow">',
                '<input type="password" placeholder="Password" id="password" />',
            '</div>',
            '<div class="inputRow">',
                '<select id="country" onchange="updateLanguages()">',
                '</select>',
            '</div>',
            '<div class="inputRow">',
                '<select id="language">',
                '</select>',
            '</div>',
            '<div class="inputRow">',
                '<input type="checkbox" id="acceptterms" name="acceptterms" style="-webkit-appearance: checkbox" /> <label for="acceptterms">I accept the terms and conditions</label>',
            '</div>',
        '</section>',
		'<section class="formSubmit">',
		    '<input type="submit"  onclick="javascript:(function(){Ext.getCmp(\'login\').doLogin()})()" value="Sign In" />',
        '</section>',
    ],
    doLogin: function () {
        var userBox = document.querySelector('#username');
        var passBox = document.querySelector('#password');
        var countrySelect = document.querySelector('#country');
        var langSelect = document.querySelector('#language');
        var termsBox = document.querySelector('#acceptterms');
        var username = userBox.value;
        var password = passBox.value;
        var country = countrySelect.value;
        var language = langSelect.value;
        var terms = termsBox.checked;
        userBox.blur();
        passBox.blur();
        countrySelect.blur();
        langSelect.blur();
        termsBox.blur();
        if (!terms) {
            Ext.Msg.alert('You must accept the terms and conditions to sign in.')
            return;
        }
        if (username && password && country && language) {
            var loadMask = new Ext.LoadMask(Ext.getBody());
            loadMask.show();
            var authURI = plServiceURI + '/auth/cy/' + country + '/lg/' + language + '/id/' + username;
            Ext.Ajax.request({
                url: authURI,
                params: {
                    pwd: password,
                    terms: terms ? 1 : 0
                    //todo: device type, device id
                },
                method: 'GET',
                success: function (response, options) {
                    var responseObj = JSON.parse(response.responseText);
                    loadMask.hide();
                    switch (responseObj.ReturnCode) {
                        case '000':
                            var storageData = getStorage('auth');
                            storageData['authkey'] = responseObj.AuthKey;
                            storageData['country'] = country;
                            storageData['language'] = language;
                            storageData['username'] = username;
                            setStorage('auth', storageData);
                            Ext.Ajax.extraParams = { authkey: responseObj.AuthKey.Key };
                            NSMobile.views.viewport = new NSMobile.views.Viewport();
                            break;
                        case '100':
                        case '140':
                            Ext.Msg.alert('Oops', 'Couldn\'t log in. Please check your username and password.');
                            break;
                        case '110':
                            Ext.Msg.alert('Oops', 'It looks like you didnt select a valid country. Please try again.');
                            break;
                        case '120':
                            Ext.Msg.alert('Oops', 'It looks like you didnt select a valid language. Please try again.');
                            break;
                        case '130':
                            Ext.Msg.alert('Oops', 'It looks like you didnt accept the terms and conditions. You must accept them to login.');
                            break;
                        case '999':
                        default:
                            Ext.Msg.alert('Error', 'The server returned an error. Please try again.')
                            break;
                    }
                },
                failure: function (reponse, options) {
                    loadMask.hide();
                    Ext.Msg.alert('Error', 'Unable to connect to the server. Please try again.');
                }
            });
        }
    },
    listeners: {
        afterrender: {
            fn: function () {
                var countrySelect = document.querySelector('#country');
                for (var locale in locales)
                    countrySelect.innerHTML += '<option value="' + locale + '">' + locales[locale].name + '</option>';
                updateLanguages();
            }
        }
    }
});

Ext.reg('login', NSMobile.views.Login);

function updateLanguages() {
    var countrySelect = document.querySelector('#country');
    var languageSelect = document.querySelector('#language');
    languageSelect.innerHTML = '';
    var locale = locales[countrySelect.value];
    for (var i = 0; i < locale.languages.length; i++)
        languageSelect.innerHTML += '<option value="' + locale.languages[i] + '">' + languages[locale.languages[i]] + '</option>';
}